<template>
     <div class="circle_img" :class="{ playing: playing }">
         <!-- <div class="pointer">
              <img class="outer_ring" src="../assets/needle-ab.png" alt="">
         </div> -->
         <div class="outer_ring_"><img class="outer_ring" src="../assets/blackborder.png" alt="">

             <div class="roll_img_"><img class="roll_img" :src="currentSong.picUrl || currentSong.al.picUrl | completeImageUrl" alt=""></div>

             <div class="pointer"><img class="_pointer" src="../assets/needle-ab.png" alt=""></div>
         </div>
         
     </div>
</template>

<script>
export default {
    props: ["currentSong","playing"],
}
</script>

<style lang="less">
    .circle_img {
        margin-top: 120px;
        display: flex;
        justify-content: center;
        .outer_ring_ {
            position: relative;
            .roll_img_ {
                position: absolute;
                top: 43px;
                left: 43px;
            }
            .pointer {
                position: absolute;
                top: -60px;
                left: 90px;
                width: 100px;
                height: 100px;
                ._pointer {
                    width: 100%;
                    height: 100%;
                    transform: rotate(15deg);
                }
            }
        }
        .outer_ring {
            width: 215px;
            height: 215px;
        }
        .roll_img {
            border-radius: 50%;
            animation: rotate 8s linear infinite;
            animation-play-state: paused;
        }
        &.playing{
            .roll_img  {
                animation-play-state: running;
            }
        }
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
</style>